<template>
    <view>
        <view class="order_time">
            <view class="order_day" v-for="(item, index) in weekDays" :key="index">
                <view>{{ item.day }}</view>

                <view :class="item.checked == true ? 'activetext' : ''" @tap="onWorkTap" :data-item="index">{{
                    item.date
                }}</view>
            </view>
        </view>
        <view class="order_status">
            <view class="status" @tap="showPicker_01">
                <text>{{ picker_01_data }}</text>
                <view class="triangle-up"></view>
            </view>
            <view class="status">共{{ orders.length }}单</view>
        </view>
        <view class="order_user" @tap="onorders" :data-item="item" v-for="(item, index) in orders" :key="index">
            <view class="order_title">
                <view class="mr-20">
                    <image class="order_img" :src="item.headPic"></image>
                </view>
                <view>
                    <view class="order_meal">顾客：{{ item.usernickname }}</view>
                    <view class="order_hair">美发师：{{ item.stylistname }}</view>
                    <view class="order_online">{{ item.ordertype == 1 ? '在线排队' : '固定时间 ' }}{{
                        item.ordertype == 1 ? '' :
                            item.time
                    }}</view>
                </view>
            </view>

            <view>
                <view class="order_text" v-if="item.status == 1">待接单</view>
                <view class="order_text1" v-if="item.status == 2">待核销</view>
                <view class="order_text2" v-if="item.status == 3">已完成</view>
                <view class="order_text2" v-if="item.status == 4">已退款</view>
                <view class="order_btn" :data-order-id="item.orderId" :data-status-remark="item.statusRemark"
                    :data-stylist-nexus="item.nexus" :data-item="item" @tap.stop.prevent="querOrderDetail">
                    查看
                </view>
            </view>
        </view>
        <view class="w-100">
            <van-empty v-if="orders.length == 0 || orders == null" description="暂无预约" />
        </view>
        <selectPicker :isShowPicker="isShow_01" @sure="sureCallBack_01" @cancle="cancleCallBack_01" scrollType="normal"
            :listData="listData_01" :indicatorStyle="'height: 47px'"></selectPicker>
    </view>
</template>

<script>
import selectPicker from '@/component/picker/picker';
// pages/order/index.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

export default {
    components: {
        selectPicker
    },
    data() {
        return {
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            isShow_01: false,

            listData_01: [['全部', '待接单', '待核销', '已完成', '已退款']],
            picker_01_data: '全部',
            weekDays: [],
            orders: [],
            status: 0,
            getday: '',
            picker_01_index: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var weekDays = [];

        for (let i = 0; i < 7; i++) {
            var now = this.addDate(i);
            var date = now.getDate();
            var day = this.getWeek(now.getDay());
            var item = {
                date: date,
                day: day,
                checked: i == 0 ? true : false,
                datetime: this.getCompletDate(now)
            };
            weekDays.push(item);
        }

        this.setData({
            weekDays: weekDays,
            getday: weekDays[0]['datetime']
        });
        this.query(this.getday, this.status);
    },
    methods: {
        showPicker_01: function () {
            this.setData({
                isShow_01: true
            });
            console.log('22', this.isShow_01);

        },

        sureCallBack_01(e) {
            let data = e.detail;
            this.setData({
                isShow_01: false,
                picker_01_data: e.detail.choosedData[0],
                picker_01_index: JSON.stringify(e.detail.choosedIndexArr),
                status: e.detail.choosedIndexArr[0]
            });
            this.query(this.getday, this.status);
        },

        cancleCallBack_01() {
            this.setData({
                isShow_01: false
            });
        },

        addDate: function (days) {
            var date = new Date();
            date.setDate(date.getDate() + days);
            return date;
        },

        getWeek: function (day) {
            var day1 = '';

            switch (day) {
                case 0:
                    day1 = '日';
                    break;

                case 1:
                    day1 = '一';
                    break;

                case 2:
                    day1 = '二';
                    break;

                case 3:
                    day1 = '三';
                    break;

                case 4:
                    day1 = '四';
                    break;

                case 5:
                    day1 = '五';
                    break;

                case 6:
                    day1 = '六';
                    break;
            }

            return day1;
        },

        getCompletDate: function (date) {
            var month = date.getMonth() + 1;
            var day = date.getDate();
            return date.getFullYear() + this.getFormatDate(month) + this.getFormatDate(day);
        },

        getFormatDate: function (arg) {
            if (arg == undefined || arg == '') {
                return '';
            }

            var re = arg + '';

            if (re.length < 2) {
                re = '0' + re;
            }

            return re;
        },

        onWorkTap: function (e) {
            let index = e.currentTarget.dataset.item;
            var weekDaysTemp = [];
            weekDaysTemp = this.weekDays;

            for (let i = 0; i < weekDaysTemp.length; i++) {
                weekDaysTemp[i]['checked'] = false;
            }

            if (weekDaysTemp[index]['checked']) {
                weekDaysTemp[index]['checked'] = false;
            } else {
                weekDaysTemp[index]['checked'] = true;
            }

            this.setData({
                weekDays: weekDaysTemp,
                getday: weekDaysTemp[index]['datetime']
            });
            this.query(this.getday, this.status);
        },

        query: function (datetime, status) {
            let storeId = uni.getStorageSync('storeId');

            _request
                .postObj('/storeManage/timemanage', {
                    datetime: datetime,
                    storeId: storeId,
                    status
                })
                .then((res) => {
                    this.setData({
                        orders: res.data.data
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        /* 订单详情 */
        querOrderDetail(event) {
            console.log(event);
            const { item } = event.currentTarget.dataset;
            var orderId = event.currentTarget.dataset.orderId;
            var orderStatus = item.status;

            if (orderStatus == 1) {
                orderStatus = '待接单';
            } else if (orderStatus == 2) {
                orderStatus = '待核销';
            } else if (orderStatus == 3) {
                orderStatus = '已完成';
            } else if (orderStatus == 4) {
                orderStatus = '已退款';
            }

            const statusRemark = event.currentTarget.dataset.statusRemark; // const orderBtn = event.currentTarget.dataset.orderBtn;

            uni.navigateTo({
                url: '/pages/orderdetail/orderdetail?orderId=' + orderId + '&statusRemark=' + statusRemark + '&orderStatus=' + orderStatus
            });
        },

        onorders() {
            console.log('占位：函数 onorders 未声明');
        }
    }
};
</script>
<style>
.order_time {
    height: 192rpx;
    background-color: #ff8722;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    margin: 20rpx;
    border-radius: 20rpx;
}

.order_day {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    margin: 20rpx;
    color: #fff;
}

.order_day view {
    margin: 10rpx;
}

.activetext {
    background-color: #fff;
    border-radius: 50%;
    color: #ff8722;
    width: 50rpx;
    height: 50rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.order_status {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 10rpx 30rpx;
}

.triangle-up {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #666;
    margin-left: 20rpx;
}

.status {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #666;
    padding: 5rpx;
    margin: 5rpx;
}

.order_user {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 20rpx;
    border-radius: 20rpx;
    background-color: #fff;
    padding: 20rpx;
}

.order_title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.order_img {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
}

.order_meal {
    height: 40rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 40rpx;
    margin: 20rpx;
}

.order_hair {
    height: 36rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 36rpx;
    margin: 20rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.order_online {
    height: 36rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
    line-height: 36rpx;
    margin: 20rpx;
}

.order_text {
    height: 40rpx;
    font-size: 32rpx;
    text-align: center;
    color: #ff1b0b;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 900;
    line-height: 40rpx;
    margin-bottom: 40rpx;
}

.order_text1 {
    height: 40rpx;
    font-size: 32rpx;
    text-align: center;
    color: #ff8722;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 900;
    line-height: 40rpx;
    margin-bottom: 40rpx;
}

.order_text2 {
    height: 40rpx;
    font-size: 32rpx;
    text-align: center;
    color: #999999;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 900;
    line-height: 40rpx;
    margin-bottom: 40rpx;
}

.order_btn {
    width: 140rpx;
    height: 52rpx;
    border-radius: 32rpx;
    text-align: center;
    color: #ff8722;
    font-size: 32rpx;
    line-height: 52rpx;
    font-weight: 900;
    border: 1px solid #ff8722;
}
</style>
